// 获取所需图标组件
const { 
    ArrowRight, 
    Search 
} = ElementPlusIconsVue;

const App = {
    data() {
        return {
            searchQuery: '',
            dialogVisible: false,
            currentQuestion: {},
            questions: [
                {
                    id: 1,
                    question: '如何使用苹果手机解锁设备?',
                    answer: `
                        <div class="answer-content">
                            <h3>苹果手机解锁方法</h3>
                            <p>您可以通过以下方式解锁您的设备：</p>
                            
                            <div class="answer-step">
                                <span class="answer-step-number">1</span>
                                <strong>人脸识别（Face ID）</strong>：直视屏幕，等待解锁
                            </div>
                            
                            <div class="answer-step">
                                <span class="answer-step-number">2</span>
                                <strong>指纹识别（Touch ID）</strong>：将已注册的手指放在Home键上
                            </div>
                            
                            <div class="answer-step">
                                <span class="answer-step-number">3</span>
                                <strong>密码解锁</strong>：输入您设置的6位数字密码
                            </div>
                            
                            <img src="https://cdn.pixabay.com/photo/2017/01/05/11/49/iphone-1954720_960_720.jpg" alt="iPhone解锁示意图">
                            
                            <p>如果您忘记了密码，请参考<a href="#" @click.prevent>《忘记密码解决方案》</a>获取帮助。</p>
                        </div>
                    `,
                    category: '苹果设备'
                },
                {
                    id: 2,
                    question: '如何使用安卓手机解锁设备?',
                    answer: `
                        <div class="answer-content">
                            <h3>安卓手机解锁方法</h3>
                            <p>您可以通过以下方式解锁您的安卓设备：</p>
                            
                            <div class="answer-step">
                                <span class="answer-step-number">1</span>
                                <strong>人脸识别</strong>：直视屏幕，等待解锁
                            </div>
                            
                            <div class="answer-step">
                                <span class="answer-step-number">2</span>
                                <strong>指纹识别</strong>：将手指放在指纹传感器上
                            </div>
                            
                            <div class="answer-step">
                                <span class="answer-step-number">3</span>
                                <strong>图案解锁</strong>：绘制您设置的解锁图案
                            </div>
                            
                            <div class="answer-step">
                                <span class="answer-step-number">4</span>
                                <strong>PIN码解锁</strong>：输入您设置的PIN码
                            </div>
                            
                            <img src="https://cdn.pixabay.com/photo/2016/11/29/05/08/android-1867665_960_720.jpg" alt="安卓解锁示意图">
                            
                            <p>各品牌安卓手机可能略有差异，请参考您手机的具体说明书。</p>
                        </div>
                    `,
                    category: '安卓设备'
                },
                {
                    id: 3,
                    question: '苹果手机找不到设备如何解决?',
                    answer: `
                        <div class="answer-content">
                            <h3>苹果手机找不到设备的解决方案</h3>
                            <p>如果您的苹果手机找不到需要连接的设备，请尝试以下步骤：</p>
                            
                            <div class="answer-step">
                                <span class="answer-step-number">1</span>
                                <strong>检查蓝牙是否开启</strong>：进入设置 > 蓝牙，确保蓝牙已打开
                            </div>
                            
                            <div class="answer-step">
                                <span class="answer-step-number">2</span>
                                <strong>重启蓝牙</strong>：关闭蓝牙，等待几秒钟后再重新打开
                            </div>
                            
                            <div class="answer-step">
                                <span class="answer-step-number">3</span>
                                <strong>重启设备</strong>：同时重启您的iPhone和需要连接的设备
                            </div>
                            
                            <div class="answer-step">
                                <span class="answer-step-number">4</span>
                                <strong>忘记设备后重新配对</strong>：设置 > 蓝牙 > 点击已配对设备旁的"i"图标 > 忘记此设备
                            </div>
                            
                            <video controls poster="https://cdn.pixabay.com/photo/2017/01/05/11/49/iphone-1954720_960_720.jpg">
                                <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
                                您的浏览器不支持视频标签。
                            </video>
                            
                            <p>如果以上方法无法解决问题，请联系我们的客户支持。</p>
                        </div>
                    `,
                    category: '苹果设备'
                },
                {
                    id: 4,
                    question: '设备电量不足怎么办?',
                    answer: `
                        <div class="answer-content">
                            <h3>设备电量不足的解决方法</h3>
                            <p>当您的设备电量不足时，可以尝试以下解决方案：</p>
                            
                            <div class="answer-step">
                                <span class="answer-step-number">1</span>
                                <strong>连接充电器</strong>：使用原装充电器和数据线为设备充电
                            </div>
                            
                            <div class="answer-step">
                                <span class="answer-step-number">2</span>
                                <strong>使用节电模式</strong>：开启设备的节电模式延长使用时间
                            </div>
                            
                            <div class="answer-step">
                                <span class="answer-step-number">3</span>
                                <strong>关闭不必要的功能</strong>：如蓝牙、Wi-Fi、定位服务等
                            </div>
                            
                            <div class="answer-step">
                                <span class="answer-step-number">4</span>
                                <strong>降低屏幕亮度</strong>：屏幕是耗电量最大的组件之一
                            </div>
                            
                            <img src="https://cdn.pixabay.com/photo/2016/11/19/15/32/laptop-1839876_960_720.jpg" alt="设备充电示意图">
                            
                            <p>长期使用后，设备电池容量会逐渐下降，建议定期检查电池健康状况。</p>
                        </div>
                    `,
                    category: '通用问题'
                },
                {
                    id: 5,
                    question: '设备过热如何处理?',
                    answer: `
                        <div class="answer-content">
                            <h3>设备过热的处理方法</h3>
                            <p>当您发现设备温度异常升高时，请尝试以下方法：</p>
                            
                            <div class="answer-step">
                                <span class="answer-step-number">1</span>
                                <strong>停止使用设备</strong>：关闭屏幕或关机，让设备冷却
                            </div>
                            
                            <div class="answer-step">
                                <span class="answer-step-number">2</span>
                                <strong>移至阴凉处</strong>：避免阳光直射或高温环境
                            </div>
                            
                            <div class="answer-step">
                                <span class="answer-step-number">3</span>
                                <strong>关闭资源密集型应用</strong>：如游戏、视频编辑等
                            </div>
                            
                            <div class="answer-step">
                                <span class="answer-step-number">4</span>
                                <strong>取下保护壳</strong>：某些保护壳会阻碍散热
                            </div>
                            
                            <img src="https://cdn.pixabay.com/photo/2017/08/10/08/47/laptop-2620118_960_720.jpg" alt="设备散热示意图">
                            
                            <p>注意：切勿将设备放入冰箱或冷水中快速降温，这可能导致设备损坏！</p>
                        </div>
                    `,
                    category: '通用问题'
                },
                {
                    id: 6,
                    question: '如何连接Wi-Fi网络?',
                    answer: `
                        <div class="answer-content">
                            <h3>连接Wi-Fi网络的方法</h3>
                            <p>连接Wi-Fi网络的步骤如下：</p>
                            
                            <h4>苹果设备：</h4>
                            <div class="answer-step">
                                <span class="answer-step-number">1</span>
                                <strong>打开设置</strong>：点击主屏幕上的"设置"图标
                            </div>
                            
                            <div class="answer-step">
                                <span class="answer-step-number">2</span>
                                <strong>选择Wi-Fi</strong>：确保Wi-Fi已开启
                            </div>
                            
                            <div class="answer-step">
                                <span class="answer-step-number">3</span>
                                <strong>选择网络</strong>：点击您要连接的网络名称
                            </div>
                            
                            <div class="answer-step">
                                <span class="answer-step-number">4</span>
                                <strong>输入密码</strong>：如果需要，输入网络密码并点击"加入"
                            </div>
                            
                            <h4>安卓设备：</h4>
                            <div class="answer-step">
                                <span class="answer-step-number">1</span>
                                <strong>打开设置</strong>：下拉通知栏点击设置图标或从应用列表打开设置
                            </div>
                            
                            <div class="answer-step">
                                <span class="answer-step-number">2</span>
                                <strong>选择网络和互联网</strong>：点击"网络和互联网"或"连接"选项
                            </div>
                            
                            <div class="answer-step">
                                <span class="answer-step-number">3</span>
                                <strong>点击Wi-Fi</strong>：确保Wi-Fi已开启
                            </div>
                            
                            <div class="answer-step">
                                <span class="answer-step-number">4</span>
                                <strong>选择网络</strong>：点击要连接的网络名称并输入密码
                            </div>
                            
                            <video controls poster="https://cdn.pixabay.com/photo/2017/01/22/22/11/wifi-2001648_960_720.jpg">
                                <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
                                您的浏览器不支持视频标签。
                            </video>
                            
                            <p>如果无法连接，请尝试重启路由器或设备。</p>
                        </div>
                    `,
                    category: '通用问题'
                }
            ]
        };
    },
    computed: {
        filteredQuestions() {
            if (!this.searchQuery) {
                return this.questions;
            }
            
            const query = this.searchQuery.toLowerCase();
            return this.questions.filter(q => 
                q.question.toLowerCase().includes(query) || 
                q.category.toLowerCase().includes(query)
            );
        }
    },
    methods: {
        filterQuestions() {
            // 搜索逻辑已在计算属性中实现
        },
        openAnswerDialog(question) {
            this.currentQuestion = question;
            this.dialogVisible = true;
        },
        handleDialogClose(done) {
            done();
        },
        getTagType(category) {
            const categoryMap = {
                '苹果设备': 'info',
                '安卓设备': 'success', 
                '通用问题': 'warning'
            };
            
            return categoryMap[category] || 'primary';
        }
    }
};

// 创建Vue应用
const app = Vue.createApp(App);

// 注册所有图标组件
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
    app.component(key, component);
}

// 使用Element Plus
app.use(ElementPlus);

// 挂载应用
app.mount('#app'); 